<template>
    <div class="login">
        <h2>登录页</h2>
        <div class="text">
            <input type="text" v-model="res.tel" placeholder="输入手机号">
        </div>
        <div class="text">
            <input type="password" v-model="res.psw" placeholder="输入密码">
        </div>
        
        <div class="btn">
            <button @click="login">登录</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            res: {
                tel: '',
                psw: '',
                checkpsw: ''
            }
        }
    },
    methods: {
        login() {
            // console.log(this.res);
            if (/^1[3-9]\d{9}$/.test(this.res.tel)) {
                alert('请重新输入手机号')
            } else if (!this.res.psw ) {
                alert('请输入密码')
            }  else {
                // 发起注册请求
                console.log('登录成功');
            }
        }
    }
}
</script>

<style lang="scss" scoped>
h2 {
    margin-top: 10px;
    text-align: center;
}

.text {
    text-align: center;
    margin-top: 20px;
}

input {
    text-align: center;
    width: 95%;
    height: 40px;
    // background-color: rgb(177, 194, 183);

    border: 1px solid #9f9999;
    // outline: none;
    border-radius: 20px;
}

button {
    width: 95%;
    height: 40px;
    color: white;
    background-color: rgb(123, 190, 147);
    outline: none;
    border: 0px;
    border-radius: 20px;

}

.btn {
    margin-top: 30px;
    text-align: center;

}
</style>